<template>
  <div id="rich"></div>
</template>

<script setup>
import { onMounted, onUnmounted } from "vue";
import * as echarts from "echarts";
import "echarts/extension/bmap/bmap";
import axios from 'axios'
let myRich = null;
let myEchart = null;
onMounted(async () => {
  myRich = document.getElementById("rich");
  myEchart = echarts.init(myRich, null, {
    locale: "ZH",
  });
  let option = {
    tooltip: {},
    bmap: {
      center: [116.405285, 39.904989],
      roam: true,
      zoom: 10,
      mapStyle: {
        styleJson: [
          {
            featureType: "water",
            elementType: "all",
            stylers: {
              color: "#d1d1d1",
            },
          },
          {
              featureType: 'land',
              elementType: 'all',
              stylers: {
                color: '#f3f3f3'
              }
            },
            {
              featureType: 'railway',
              elementType: 'all',
              stylers: {
                visibility: 'off'
              }
            },
            {
              featureType: 'highway',
              elementType: 'all',
              stylers: {
                color: '#fdfdfd'
              }
            },
            {
              featureType: 'highway',
              elementType: 'labels',
              stylers: {
                visibility: 'off'
              }
            },
            {
              featureType: 'arterial',
              elementType: 'geometry',
              stylers: {
                color: '#fefefe'
              }
            },
            {
              featureType: 'arterial',
              elementType: 'geometry.fill',
              stylers: {
                color: '#fefefe'
              }
            },
            {
              featureType: 'poi',
              elementType: 'all',
              stylers: {
                visibility: 'off'
              }
            },
            {
              featureType: 'green',
              elementType: 'all',
              stylers: {
                visibility: 'off'
              }
            },
            {
              featureType: 'subway',
              elementType: 'all',
              stylers: {
                visibility: 'off'
              }
            },
            {
              featureType: 'manmade',
              elementType: 'all',
              stylers: {
                color: '#d1d1d1'
              }
            },
            {
              featureType: 'local',
              elementType: 'all',
              stylers: {
                color: '#d1d1d1'
              }
            },
            {
              featureType: 'arterial',
              elementType: 'labels',
              stylers: {
                visibility: 'off'
              }
            },
            {
              featureType: 'boundary',
              elementType: 'all',
              stylers: {
                color: '#fefefe'
              }
            },
            {
              featureType: 'building',
              elementType: 'all',
              stylers: {
                color: '#d1d1d1'
              }
            },
            {
              featureType: 'label',
              elementType: 'labels.text.fill',
              stylers: {
                color: '#999999'
              }
            }
        ],
      },
    },
    series: [
      // {
      //   type: 'graph',
      // coordinateSystem: 'bmap',
      //   coordinateSystem: 'geo',
      //   data: [[116.405285, 39.904989], [117.190182, 39.125596], [114.502461, 38.045474]],
      //   links: [
      //     {
      //       source: 0,
      //       target: 1
      //     }
      //   ]
      // },
      {
        type: "lines",
        coordinateSystem: "bmap",
        polyline: true,
        effect: {
          show: true,
          symbol: "image://http://localhost:5173/image/plane.svg",
          symbolSize: 15,
        },
        lineStyle: {
          color: "green",
          width: 2,
        },
        data: [
          {
            // 一条线
            coords: [
              [117.190182, 39.125596],
              [116.405285, 39.904989],
              [113.280637, 23.125178],
            ],
          },
          {
            coords: [
              [113.54909, 22.198951],
              [125.3245, 43.886841],
            ],
          },
        ],
      },
      {
          type: 'lines',
          id: 2,
          coordinateSystem: 'bmap',
          polyline: true,
          data: [],
          silent: true,
          lineStyle: {
            color: 'rgb(200, 35, 45)',
            opacity: 0.2,
            width: 1
          },
          progressiveThreshold: 500,
          progressive: 200
        }
    ],
  };
  myEchart.setOption(option);
  let { data } = await axios.get('/examples' + '/data/asset/data/lines-bus.json');
  let busLines = [].concat.apply(
    [],
    data.map(function (busLine, idx) {
      let prevPt = [];
      let points = [];
      for (let i = 0; i < busLine.length; i += 2) {
        let pt = [busLine[i], busLine[i + 1]];
        if (i > 0) {
          pt = [prevPt[0] + pt[0], prevPt[1] + pt[1]];
        }
        prevPt = pt;
        points.push([pt[0] / 1e4, pt[1] / 1e4]);
      }
      return {
        coords: points
      };
    })
  )
  myEchart.setOption({
    series: [
      {
        id: 2,
        data: busLines
      }
    ]
  });
});
onUnmounted(() => {
  myEchart.dispose(myRich);
});
</script>

<style lang="less" scoped>
#rich {
  width: 800px;
  height: 600px;
}
</style>
